<template>
    <div class="container">
        <div class="search-bar">
            <input class="search-input" placeholder="请输入机构名称" v-model="params.searchName" />
            <a class="search-a" @click="getOrgList">搜索</a>
        </div>
        <div class="org-list">
            <ul>
                <li v-for="org in orgList">
                    <OrgLi v-bind:org="org"></OrgLi>
                </li>
            </ul>
        </div>
        <div class="no-result" v-if="noResult">
            <div class="no-result-i">
                <i class="fa fa-search"></i>
            </div>

            <p>没有找到匹配的结果</p>
        </div>
    </div>
</template>

<script>
    import OrgLi from './orgListDetail.vue'
    export default {
        name: "org-search",
        components:{
            OrgLi
        },
        mounted(){

        },
        data(){
            return{
                params:{
                    pageNo:1,
                    pageSize:10,
                    searchName:''
                },
                orgList:[],
                noResult:false

            }
        },
        methods:{
            getOrgList(){
                var _self = this;
                var body = {};
                body.params = _self.params;
                var url = this.utilHelper.apiUrl + '/api/getOrgAssistantList';
                this.$http.post(url,body).then((response)=>{
                    var body = response.body;
                    var resData = body.resData;
                    if(1 == resData.result){
                        _self.orgList =resData.page.rows;
                        if(!_self.orgList || _self.orgList.length == 0){
                            _self.noResult = true;
                        }else{
                            _self.noResult = false;
                        }
                    }else{
                        _self.noResult = true;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .search-bar{text-align: center;margin: 10px 0;}
    .search-input{width: 80%;border-radius: 5px;height: 35px;}
    .search-a{color:#d58512;}
    .org-list{margin-top: 15px;}
    .org-list :after{clear:both;}
    .button-add-org{-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 4px;border: 0;box-sizing: border-box;color: inherit;font-size: 12px;height: 20px;outline: 0;overflow: hidden;position: relative;text-align: center;    background-color: #fff;color:#ff962e;padding:0 10px;border:1px solid #ff962e;}
    .button-add-org i{margin-right: 5px;}
    .no-result{text-align: center;margin-top: 100px;}
    .no-result i{font-size: 80px;color: #efefef;margin-top: 15px;}
    .no-result-i{width: 120px;;height: 120px;border-radius: 120px;background: #999999;margin: 0 auto;}
    .no-result p{font-size:24px;margin-top: 20px;color:#999999;}
</style>